<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>/">
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="ht/layui/css/layui.css">
<link rel="stylesheet" href="ht/css/xiaoge.css">
<script type="text/javascript" src="ht/js/mouse.js"></script>
<style type="text/css">
	.xiaoge-bg{
		width:98%;
		margin-left:1%;
		border: 0px solid red;
		position:absolute;
	}
	
	.xiaoge-top{
		width:100%;
		height: 50px;
		position:relative;
		margin-top:15px;
		border:0px solid green;
	}
	.xiaoge-top-top{
		width:100%;
		height: 40px;
		border:0px solid green;
	}
	.xiaoge-top-top-font{
		line-height: 40px;
		font-size: 14px;
		border:0px solid red;
	}
	
	.xiaoge-bottom{
		width:100%;
		height: 50px;
		position:relative;
		border:0px solid red;
	}
	.xiaoge-bottom-content{
		width:100%;
		height: 40px;
		position:relative;
		margin-top:5px;
		background-color:#EEE;
		border:1px solid #EEE;
	}
	.xiaoge-fleft{
		float: left;
		height: 40px;
		margin-left:5px;
		line-height:40px;
	}
	.xiaoge-fRight{
		float: right;
		height: 40px;
		margin-left:5px;
		line-height:40px;
		width: 100px;
	}
	.top-title{
		height: 40px;
		width: 100%;
		line-height: 38px;
	}
	.top-title-p-font{
		color: #FF8800;
		font-family: '华文行楷';
		font-size: 28px;
	}
	.xiaoge-btn{
		display: block;
		height: 40px;
		border:0px solid gray;
		border-radius: 12px;
		width: 80px;
		outline:none;
		font-size: 16px;
		float:left;
		color:#188ae2 !important;
		font-weight: bold;
	}
</style>
</head>
<body>
	<div class="xiaoge-bg">
		<div class="xiaoge-top" style="border:0px solid red;">
			<div class="xiaoge-bottom">
				<div class="xiaoge-bottom-content">
					<div class="xiaoge-fleft">
						<font style="font-size: 24px;font-weight: bold;color:#188ae2 !important;font-family: '华文行楷';">
							汽车入库出库管理
						</font>
					</div>
					<div class="xiaoge-fRight">
						<button class="xiaoge-btn" id="add">汽车入库</button>
					</div>
				</div>
			</div>
		</div>
		<table class="layui-hide" style="opacity:0.5;" width="100%" border="1" bordercolor="gray" cellspacing="0" cellpadding="3" id="admin" lay-filter="barDemo">
		</table>
		<script  type="text/javascript" id="barDemo">
			<a class="layui-btn layui-btn-xs" title="汽车出库" lay-event="colse">出库</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" title="删除" lay-event="del">删除</a>  
		</script>
	</div>
</body>
<script type="text/javascript" src="ht/layui/layui.js" ></script>
<script type="text/javascript">
	layui.use(['laypage', 'layer', 'table'], function(){
		 layer = layui.layer //弹层
		,laypage = layui.laypage //分页
		,table = layui.table //表格
		,$ = layui.$ //$是jquery对象
		table.render({
		    elem: '#admin'
		    ,method:'post' //post请求
		    ,height: 520
		    ,opacity:0.5
		    ,url: 'carRoomAction!queryPageModelFromCarRoom.action' //数据接口
		    ,page: true //开启分页
		    ,limit:11 //默认每页数据数
		    ,limits:[5,10,15,20,25] //分页列表
		    ,cols: [[ //表头
		       {field: 'carRId',title:'ID',align:'center',width:'8%',sort: true, fixed: 'left'}
		       ,{field: 'sermodel',width:'10%', title:'服务车型',align:'center'}
		       ,{field: 'carRMainName',width:'10%', title:'客户名称',align:'center'}
		       ,{field: 'carRMainPhone',width:'12%', title:'联系电话',align:'center'}
		       ,{field: 'serverType',width:'10%', title:'服务类型',align:'center'}
		      ,{field: 'carRoomStartTime',width:'10%', title:'入库时间',align:'center'}
		      ,{field: 'carRoomEndTime',width:'10%', title:'出库时间',align:'center',templet:'<div>{{d.carRoomEndTime==null?"维护中":d.carRoomEndTime}}</div>'}
		      ,{field: 'remark',width:'15%', title:'备注',align:'center'}
		      ,{fixed: 'right', title:'操作',width:'15%', align:'center', toolbar: '#barDemo'}
		    ]]
		 });
		
		//添加文档类别
		 $("#add").click(function(){
			 layer.open({
		         type: 2 //此处以iframe举例
		        ,title:'汽车入库登记'
		        ,area: ['100%', '100%']
		        ,shade: 0.3 //遮罩0-1
		        ,maxmin: false //最大化最小化
		        ,content: "ht/carroomadd.jsp"
		        ,zIndex: layer.zIndex //重点1
	   		});   
		 });
		 
		//监听工具条
		 table.on('tool(barDemo)',function(obj){
			
			 var data = obj.data//获取当前行数据
			 ,layEvent = obj.event;//获取事件名
			 if(layEvent=='colse'){		//**********************查询
				 var ID = data.carRId;
				 if(data.carRoomEndTime!=null){
					 layer.msg('编号'+ID+"已经提出车库！", {time: 2000 },{});
				 }else{
					 layer.confirm("你确定要提车的编号是"+ID+"的客户吗？",function(index){
						
						 $.post("carRoomAction!updateCarRoomEndTimeById.action",{"id":ID},function(data){
							
							 if(data){
								layer.msg('汽车出库成功！', {time: 3000 },{});
								//加载list页面数据
								window.layui.table.reload('admin');
							 }else{
								layer.msg('soory,系统异常了。。。', {time: 2000 },function(){
					    			window.layui.table.reload('admin');
					    		});
							}
						});
						 layer.close(index);
					 });
				 }
			 }else if(layEvent=='edit'){//**************************修改
				 
				 layer.open({
			         type: 2 //此处以iframe举例
			        ,title:'修改客户入库资料'
			        ,area: ['100%', '100%']
			        ,shade: 0.3 //遮罩0-1
			        ,maxmin: false //最大化最小化
			        ,content: "carRoomAction!querymanagerInfo.action?id="+data.managerId
			        ,zIndex: layer.zIndex //重点1
		   		});   
			 }else if(layEvent=='del'){//*************************删除
				 var ID = data.carRId;
				 layer.confirm("你确定要删除编号为"+ID+"的在条数据吗？",function(index){
					
					 $.post("carRoomAction!deleteCarRoomById.action",{"id":ID},function(data){
						
						 if(data){
							 layer.msg('删除成功！', {time: 3000 },{});
							 obj.del();
						 }else{
							
							 layer.msg('sorry,异常了。。。', {time: 2000 },function(){
				    			window.layui.table.reload('admin');
				    		});
						}
					});
					 layer.close(index);
				 });
			 }
		 });
	});
</script>
</html>